<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <canvas id="myCanvas" width="1080" height="630"></canvas>
</body>

</html>
<script>

    const ctx = myCanvas.getContext('2d');

    let p1 = [300, 250];
    let p2 = [500, 250];

    /**
 * 创建向量 (从起点到终点的一个向量)
 */
    function vct([x1, y1], [x2, y2]) {  // 两个点
        let x = x2 - x1;
        let y = y2 - y1;
        return [x, y];
    };

    /**
    * 向量加法: 几何意义是两个两个向量的中间值,长度是原来的两者长度之和
    */
    function vctAdd([x1, y1], [x2, y2]) {  // 两个向量
        return [x1 + x2, x2 + y2];
    };

    /**
    * 获取向量的长度，又称模长
    */
    function getVctLen([x, y]) {  // 向量
        return Math.sqrt(x * x + y * y);
    };

    /**
     * 新建一个向左的向量
     */
    function left() {
        return [-10, 0]
    }

    /**
     * 新建一个向右的向量
     */
    function right() {
        return [10, 0]
    }

    /**
     * 新建一个向下的向量
     */
    function down() {
        return [0, 10]
    }

    /**
     * 新建一个向上的向量
     */
    function up() {
        return [0, -10]
    }
    
</script>

<style>

</style>